<template>
  <div class="article-wrapper">
    <a-card :loading="[0, 1, 3].includes(article.status)">
      <div class="article-title">
        <span>文章标题：</span>
        <a-input
          v-model:value="article.title"
          placeholder="请输入文章标题"
        ></a-input>
      </div>
      <div class="article-content">
        <div class="editor-content">
          <a-textarea
            v-model:value="article.content"
            :autoSize="{
              minRows: isMultiple ? 8 : 20,
              maxRows: isMultiple ? 8 : 20,
            }"
          ></a-textarea>
        </div>
        <div class="btn-area">
          <a-button @click="copyTitle" size="small"
            ><copy-outlined />复制标题</a-button
          >
          <a-button @click="copyContent" size="small"
            ><copy-outlined />复制正文</a-button
          >
          <a-button @click="collectHandle" size="small"
            ><plus-outlined />添加到文案库</a-button
          >
          <a-button
            v-permissionOneClickClip
            @click="batchTextOperation('OneClickClip')"
            size="small"
            >一键成片</a-button
          >
          <a-button
            type="primary"
            size="small"
            @click="batchTextOperation('mixedCutCreat')"
            >去剪辑</a-button
          >
        </div>
      </div>
    </a-card>
    <!-- 保存到文案库弹窗 -->
    <BatchCollect ref="batchTextadd" :articles="[articleData]"></BatchCollect>
  </div>
</template>
<script setup>
import { ref, shallowRef, onBeforeUnmount } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import { message, Modal } from "ant-design-vue";
import { useVModel } from "@vueuse/core";
import utils from "@/common/utils/utils";
import { useRouter } from "vue-router";
import request from "@/common/utils/request";
import store from "@/store";
// 保存到文案库弹窗组件
import BatchCollect from "./batchCollect.vue";
import {
  CopyOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
const props = defineProps({
  articleData: {
    type: Object,
    default: () => {
      return {
        id: "",
        title: "",
        content: "",
        status: 1,
      };
    },
  },
  isMultiple: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:articleData", "updateList"]);
let article = useVModel(props, "articleData", emit);

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

const editorCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
let collectVisible = ref(false);
const editorChange = () => {};
const editorConfig = {
  placeholder: "请输入文章内容",
  hoverbarKeys: {
    text: {
      menuKeys: ["bold", "italic", "underline", "through", "color"],
    },
  },
};
const toolbarConfig = {
  toolbarKeys: [
    "bold",
    "underline",
    "color",
    "italic",
    "through",
    "undo",
    "redo",
  ],
};
const deleteArticle = () => {
  Modal.confirm({
    title: () => `确定要删除吗？`,
    centered: true,
    okText: "确认",
    cancelText: "取消",
    onOk() {
      request
        .del("/work_ai", "/user/socialMedia/imitativeTaskLog/delete", {
          ids: [props.articleData.id],
          campaign_task_id: props.articleData.campaign_task_id,
        })
        .then((res) => {
          emit("updateList", props.articleData.id);
          message.success("删除成功");
        });
    },
  });
};
const copyContent = () => {
  utils.copyText(article.value.content);
};
const copyTitle = () => {
  utils.copyText(article.value.title);
};
const createArticle = () => {
  store.commit("SET_ARTICLE", article.value);
  router.push({ name: "ImageText" });
};

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  ``;
  editor.destroy();
});

// 批量一键成片/批量剪辑
const batchTextOperation = (type) => {
  store.commit("SET_SCENE_CREATION_TEXTS", [article.value.content]);
  store.commit("SET_SCENE_CREATION_TITLES", [article.value.title]);
  const routeConfig = {
    OneClickClip: {
      name: "OneClickClip",
      query: { sceneCreation: "sceneCreation" },
    },
    mixedCutCreat: {
      name: "mixedCutCreat",
      query: { type: 0, viewType: 2, sceneCreation: "sceneCreation" },
    },
  };

  router.push(routeConfig[type]);
};
// 添加到文案库
let batchTextadd = ref(null);
const collectHandle = () => {
  batchTextadd.value && batchTextadd.value.showModal();
};
</script>
<style lang="less" scoped>
.article-wrapper {
  margin-bottom: 20px;
}
.article-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  span {
    flex-shrink: 0;
  }
}
.toolbar {
  border: 1px solid #ccc;
}
.btn-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 10px;
}
</style>
